<template>
	<view class="wrap">
		<view class="close" @click="goback"></view>
		<PreView :preList='vuex_toBePaidList' :defaultIndex="targetIndex" @slideChange="slideChange"></PreView>
		<!-- 足部 -->
		<view class="footer">
			<view class="addbox" v-if="hadSelectPicCount>0">{{hadSelectPicCount}}</view>
			<view class="shopbg" @click="goback"></view>
			<view class="wannabg"  :class="[isWanna?'removebg':'']" @click="wannaTap()"></view>
		</view>
	</view>
</template>

<script>
	import PreView from '@/components/PreView/index.vue'
	export default{
		data(){
			return{
				currentIndex:0,
				hadSelectPicCount:0,
				isWanna:false,
				targetIndex:0
			}
		},
		onLoad(option) {
			if(option.targetIndex){
				this.targetIndex=option.targetIndex
			}
		},
		onShow(){
			this.isWanna=this.vuex_toBePaidList[this.currentIndex].isSelected;
			this.hadSelectPicCount=this.calcuPicNum(this.vuex_toBePaidList)
		},
		methods:{
			// 返回
			goback(){
				uni.navigateBack();
			},	
			slideChange(index){
                this.currentIndex=index;
				// 收藏和勾选同步显示
				this.isWanna=this.vuex_toBePaidList[index].isSelected;
			},
			wannaTap(){
				let list=this.vuex_toBePaidList;
				let currentPic=list[this.currentIndex];
				currentPic.isSelected=!currentPic.isSelected;
				this.isWanna=currentPic.isSelected;
                this.$u.vuex('vuex_toBePaidList',list);
				// 更新购物车数量
				this.hadSelectPicCount=this.calcuPicNum(list)
                uni.$emit('calculatePicCount');
			},
			 // 计算收藏图片数量
			calcuPicNum(list){
				let count=0;
				list.forEach((item,index)=>{
					if(item.isSelected){
						count+=1;
					}
				});
				return count
			}
		},
		components:{
			PreView
		}
	}
</script>

<style lang="scss" scoped='scoped'>
	.wrap{
		width: 100%;
		height: 100%;
		overflow: hidden;
		.close{
			width: 30rpx;
			height: 30rpx;
			position: fixed;
			top: 35rpx;
			right: 15rpx;
			background: url(@/pages/minePages/static/preview/close.png) no-repeat center;
			background-size: cover;
		}

		.footer{
			width: 690rpx;
			height: 98rpx;
			position: fixed;
			left: 30rpx;
			bottom: 50rpx;
			display: flex;
			justify-content: space-between;
			.addbox{
				position: absolute;
				left:64rpx;
				top: -16rpx;
				width:50rpx;
				height: 50rpx;
				border-radius: 50%;
				z-index: 99;
				text-align: center;
				line-height: 50rpx;
				background: #ff4d4d;
				color: #ffffff;
				font-size: 26rpx;
			}
			.shopbg{
				width: 90rpx;
				height: 90rpx;
				margin-top: 4rpx;
				background: url(@/pages/minePages/static/preview/shop.png);
				background-size: cover;
			}
			.wannabg{
				width: 234rpx;
				height: 90rpx;
				margin-top: 4rpx;
				background: url(@/pages/minePages/static/preview/wanna.png);
				background-size: cover;
			}
			.removebg{
				width: 182rpx;
				height: 90rpx;
				margin-top: 4rpx;
				background: url(@/pages/minePages/static/preview/remove.png);
				background-size: cover;
			}
		}
	}
</style>
